<template>
	<div>


		<div class="show-pc">
			<div class="notification_item">
				<div class="title">消息通知</div>
				<div class="content_box">
					<div class="Select_left">

						<div class="selector-wrapper" :style="{ maxWidth: '76vw' }">
							<div v-for="item in menuItems" :key="item.key" class="menu-item"
								:class="{ 'active': activeKey === item.key }" @click="handleSelect(item.key)">
								{{ item.label }}
								<div class="Overallmessage" v-if="item.messageNum !== 0">{{ item.messageNum }}</div>
							</div>

						</div>

					</div>
					<div class="information_right">
						<!-- 外层滚动容器 -->
						<div class="information_box" v-for="(item, index) in messagelist" :key=index
							v-show="activeKey === 'works'">
							<a-collapse :bordered="false" class="custom-collapse" expandIconPosition="end" accordion>
								<template #expandIcon="{ isActive }">
									<div style="display: flex; align-items: center;">
										<div class="Time" style="margin-right:10px">{{ item.createTime }} </div>

										<RightOutlined :rotate="isActive ? -90 : 90" :style="{
											fontSize: '17px',
										}" />
									</div>
								</template>
								<a-collapse-panel @click="handleREAD(item)">
									<template #header>
										<span class="Text-title">{{ item.titile }}</span>
										<span class="messageTypeif">
											{{ item.msgCategory == 1 ? '通知公告' : '系统消息' }}
										</span>


										<img src="@/assets/images/new_img/点.png" alt="" class='drop'
											v-if="item.readFlag == 0">
									</template>
									<p class="Text" v-html="item.msgContent"></p>
								</a-collapse-panel>
							</a-collapse>
						</div>
						<!-- 点赞内容 -->
						<div v-show="activeKey === 'notifications'">
							<div class="praise_box" v-for="(item, index) in designWorks">
								<div class="praise_top" style="justify-content: space-between">
									<div style="display: flex">
										<div style="margin-right: 10px">
											<img :src="item.userList[0].avatar" alt="" class="userimg">
										</div>
										<div>
											<div class="userinfo">
												<div class="userinfo_title">{{ item.title }}</div>
											</div>
											<div class="upvote">{{ item.userList[0].realname }}{{ item.messageType ===
												'1' ?
												'点赞' :
												item.messageType === '2' ? '收藏' : '' }}了你的作品</div>
											<div class="WorkTime">{{ item.likeCreateTime }}</div>
										</div>
									</div>
									<div class="a-button" @click="selectDesignWorks(item)" style="">
										<a-button type="link">查看更多</a-button>
									</div>
								</div>
								<div>
									<div class="works_box">

										<div class="works_img_item" v-if="item.imageList.length !== 0">
											<img :src="item.imageList[0].imgAbridgePath" class="works_img" alt="">
										</div>

										<div class="works_text_item">
											<div class="works_text">{{ item.picTitle }}</div>
											<div class="works_Time">
												<div>{{ item.createTime }}</div>
												<div>{{ item.columnName }}</div>
											</div>
										</div>
									</div>
								</div>
							</div>

						</div>
						<!-- 审核通知 -->
						<div v-show="activeKey === 'Auditnotification'">
							<div class="praise_box" v-for="(item, index) in myAuditMessageList">
								<div class="praise_top" style="justify-content: space-between">
									<div style="display: flex">
										<div style="margin-right: 10px">
											<img :src="item.userList[0].avatar" alt="" class="userimg">

										</div>
										<div>
											<div class="userinfo">
												<div class="userinfo_title">{{ item.title }}</div>
											</div>
											<div class="upvote">{{ item.userList[0].realname }}</div>
											<div class="WorkTime">{{ item.likeCreateTime }}</div>
											<div class="WorkTime">{{ item.content }}</div>
										</div>
									</div>
							

								</div>
								<div>
									<div class="works_box">

										<div class="works_img_item" v-if="item.imageList.length !== 0">
											<img :src="item.imageList[0].imgAbridgePath" class="works_img" alt="">
											<div class="Outlinedbtn"  @click="Reedit(item)" v-if="item.status == 3">
												<FormOutlined />
											</div>
										</div>

										<div class="works_text_item">
											<div class="works_text">{{ item.picTitle }}</div>
											<div class="works_Time">
												<div>{{ item.createTime }}</div>
												<div>{{ item.columnName }}</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>


						<!-- 加载动画 -->
						<div v-if="loading" class="loading-container">
							<a-spin size="large" class="custom-spin" />
						</div>
						<!-- 触发懒加载的占位元素 -->
						<div v-else ref="myElement"></div>

						<div style="height: 50px"></div>
						<!-- 空数据提示 -->
						<div>
							<template v-if="(messagelist.length === 0 && !loading) || !isMove">
								<a-empty description="我也是有底线的" style="color: var(--color-text);" />
							</template>
						</div>


					</div>
				</div>
			</div>
		</div>
		<!-- 手机 -->
		<div class="show-wap">
			<div class="works_item-wap">
				<!-- <div class="title-wap" style="color: var( --color-text);">消息通知</div> -->
				<div>
					<div class="selector-wrapper-wap">
						<div class="selector-container-wap" :style="{ maxWidth: '76vw' }">
							<div v-for="item in menuItems" :key="item.key" class="menu-item-wap"
								:class="{ 'active': activeKey === item.key }" @click="handleSelect(item.key)">
								{{ item.label }}
								<div class="Overallmessage-wap" v-if="item.messageNum !== 0">{{ item.messageNum }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 外层滚动容器 -->
			<div class="information_right-wap">
				<div class="information_box-wap" v-for="(item, index) in messagelist" :key=index
					v-show="activeKey === 'works'">
					<a-collapse :bordered="false" class="custom-collapse" expandIconPosition="end" accordion>
						<template #expandIcon="{ isActive }">
							<div style="display: flex; align-items: center;">
								<div class="Time" style="margin-right:10px">{{ item.createTime }}</div>
								<RightOutlined :rotate="isActive ? -90 : 90" :style="{
									fontSize: '17px',
								}" />
							</div>
						</template>
						<a-collapse-panel @click="handleREAD(item)">
							<template #header>
								<span class="Text-title">{{ item.titile }}</span>
								<span class="messageTypeif-wap">
									{{ item.msgCategory == 1 ? '通知公告' : '系统消息' }}
								</span>

								<span class="drop-box">
									<img src="@/assets/images/new_img/点.png" alt="" class='drop-wap'
										v-if="item.readFlag == 0">
								</span>
							</template>
							<p class="Text" v-html="item.msgContent"></p>
						</a-collapse-panel>
					</a-collapse>

				</div>
				<!-- 点赞内容 -->
				<div v-show="activeKey === 'notifications'">
					<div class="praise_box-wap" v-show="activeKey === 'notifications'"
						v-for="(item, index) in designWorks">
						<div class="praise_top-wap">
							<div><img :src="item.userList[0].avatar" alt="" class="userimg-wap">
							</div>
							<div>
								<div class="upvote-wap">{{ item.userList[0].realname }}{{ item.messageType === '1' ?
									'点赞' :
									item.messageType === '2' ? '收藏' : '' }}了你的作品</div>
								<div style="color: var(--color-text);">{{ item.likeCreateTime }}</div>
							</div>
							<div class="link-btn-wap" @click="selectDesignWorksWAP(item)">
								<a-button type="link">查看更多</a-button>
							</div>
						</div>
						<div>
							<div class="works_box-wap">
								<div class="works_img_item-wap" style="display: flex; justify-content: center;"
									v-if="item.imageList.length !== 0">
									<img :src="item.imageList[0].imgAbridgePath" class="works_img-wap" alt="">
								</div>
								<div class="works_text_item-wap">
									<div class="works_text-wap">{{ item.picTitle }}</div>
									<div class="works_Time-wap">
										<div>{{ item.createTime }}</div>
										<div>{{ item.columnName }}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 审核通知 -->
				<div v-show="activeKey === 'Auditnotification'">
					<div class="praise_box-wap" v-for="(item, index) in myAuditMessageList">
						<div class="praise_top-wap">
							<div><img :src="item.userList[0].avatar" alt="" class="userimg-wap">
							</div>
							<div>
								<div class="upvote-wap">{{ item.userList[0].realname }}</div>
								<div style="color: var(--color-text);">{{ item.likeCreateTime }}</div>
								<div style="color: var(--color-text);">{{ item.content }}</div>
							</div>
						</div>
						<div>
							<div class="works_box-wap">
								<div class="works_img_item-wap" style="display: flex; justify-content: center;"
									v-if="item.imageList.length !== 0">
									<img :src="item.imageList[0].imgAbridgePath" class="works_img-wap" alt="">
								</div>

								<div class="works_text_item-wap">
									<div class="works_text-wap">{{ item.picTitle }}</div>
									<div class="works_Time-wap">
										<div>{{ item.createTime }}</div>
										<div>{{ item.columnName }}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>


				<!-- 加载动画 -->
				<div v-if="loading" class="loading-container-wap">
					<a-spin size="large" class="custom-spin" />
				</div>
				<!-- 触发懒加载的占位元素 -->
				<div v-else ref="myElement"></div>

				<div style="height: 50px"></div>
				<!-- 空数据提示 -->
				<div style="padding-bottom: 30px;">
					<template v-if="(messagelist.length === 0 && !loading) || !isMove">
						<a-empty description="我也是有底线的" style="color: var(--color-text);" />
					</template>
				</div>


			</div>


		</div>
		<!-- pc -->
		<div class="show-pc">
			<a-modal v-model:open="modal1VisibleDz" :centered="true" width="39.3vw" @ok="setModal1Visible(false)"
				:footer="null" :bodyStyle="{ height: '30.3vw', }">
				<template #title>
					<div class="title-slot">


						{{ modelType ===
							'1' ?
							'点赞' :
							modelType === '2' ? '收藏' : '' }}列表
					</div>
				</template>
				<a-list item-layout="horizontal" :data-source="dzData" class="fans-list">
					<template #renderItem="{ item }">
						<a-list-item>
							<div class="fans-box">
								<div class="fans-content">
									<div>
										<img :src="item.avatar" alt="" class="user-img">
									</div>
									<div>
										<p class="user-name">{{ item.realname }}</p>
										<div class="">
											{{ item.departName }}
											{{ item.positionName }}
										</div>
									</div>
								</div>
							</div>
						</a-list-item>
					</template>
					<div class="NoMore">
						我是有底线的
					</div>
				</a-list>
			</a-modal>
		</div>


		<!-- wap -->
		<div class="show-wap">
			<a-modal v-model:open="modal1VisibleDzWAP" :centered="true" width="80%" @ok="setModal1Visible(false)"
				:footer="null" :bodyStyle="{ height: '300px', }">
				<template #title>
					<div class="title-slot-wap">
						{{ modelType ===
							'1' ?
							'点赞' :
							modelType === '2' ? '收藏' : '' }}列表
					</div>
				</template>
				<a-list item-layout="horizontal" :data-source="dzDataWAP" class="fans-list-wap">
					<template #renderItem="{ item }">
						<a-list-item>
							<div class="fans-box-wap">
								<div class="fans-content-wap">
									<div>
										<img :src="item.avatar" alt="" class="user-img-wap">
									</div>
									<div>
										<p class="user-name-wap">{{ item.realname }}</p>
										<div>
											{{ item.departName }}
											{{ item.positionName }}
										</div>
									</div>
								</div>
							</div>
						</a-list-item>
					</template>
					<div class="NoMore-wap">
						我是有底线的
					</div>
				</a-list>
			</a-modal>
		</div>
		<UploadWorks ref="uploadFileRef" @editOk="editOk" @delOk="delOk"></UploadWorks>
	</div>
</template>

<script setup>
import {
	useHttp
} from '@/api/http'
import {
	ref,
	onMounted,
	onUnmounted,
	watch,
	defineEmits
} from 'vue';

import { FormOutlined } from '@ant-design/icons-vue'

import UploadWorks from '@/components/uploadWorks/index.vue';
import { useRoute } from 'vue-router'
import { useStore } from '@/store'

const { themeStore } = useStore()
const route = useRoute()
const uploadFileRef = ref(null)

const activeKey = ref(route.query.activeKey || 'works')
const loading = ref(false)
const isMove = ref(true)
const menuItems = ref([{
	key: 'works',
	label: '系统消息',
	messageNum: 0,
},
{
	key: 'notifications',
	label: '点赞与收藏',
	messageNum: 0,
},
{
	key: 'Auditnotification',
	label: '审核通知',
	messageNum: 0,
},
]);

watch(() => themeStore.messageList, (newList) => {
	menuItems.value.forEach((item, index) => {
		if (item.key === "works") {
			item.messageNum = themeStore.messageList.sysMessageCount
		} else if (item.key === "notifications") {
			item.messageNum = themeStore.messageList.likeAndCollectCount
		} else if (item.key === "Auditnotification") {
			item.messageNum = themeStore.messageList.examineCount
		}

	});
})






// 消息通知
const messagelist = ref([])
// 点赞数据
const designWorks = ref([]);
// 审核消息
const myAuditMessageList = ref([]);

const queryParams = ref({
	pageNo: 1,
	pageSize: 10,
})

// 点赞模态框数据
const dzData = ref([])
const modal1VisibleDz = ref(false)
const dzDataWAP = ref([])
const modal1VisibleDzWAP = ref(false)
const modelType = ref(null)

const myElement = ref(null)

onMounted(() => {
	getData(activeKey.value)
	window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
	window.removeEventListener('scroll', handleScroll)
})

// 选择事件
const handleSelect = (key) => {
	// 重置分页参数
	queryParams.value.pageNo = 1
	isMove.value = true
	activeKey.value = key

	// 清空当前标签的数据
	if (key === 'works') {
		messagelist.value = []
		themeStore.messageList.sysMessageCount = 0

	} else if (key === 'notifications') {
		designWorks.value = []
		themeStore.messageList.likeAndCollectCount = 0
		document.getElementById('clearCOunt').click()

	} else if (key === 'Auditnotification') {
		myAuditMessageList.value = []
		themeStore.messageList.examineCount = 0
		document.getElementById('clearCOunt').click()
	}
	getData(key)
}

// 统一处理数据加载
const getData = (key) => {
	loading.value = true
	switch (key) {
		case 'works':
			useHttp.get('/web/my/mySysMessageList', queryParams.value).then((res) => {
				processResponse(res, messagelist)
			})
			break
		case 'notifications':
			useHttp.get('/web/my/myLikeNotificationList', queryParams.value).then((res) => {
				processResponse(res, designWorks)
			})
			break
		case 'Auditnotification':
			useHttp.get('/web/my/myAuditMessageList', queryParams.value).then((res) => {
				processResponse(res, myAuditMessageList)
			})
			break
	}
}

// 统一处理响应数据
const processResponse = (res, targetList) => {
	loading.value = false

	if (res && res.result && res.result.records) {
		// 处理系统消息的HTML清理
		if (targetList === messagelist) {
			const cleanedRecords = res.result.records.map(record => ({
				...record,
				msgContent: removeStyleAttribute(record.msgContent)
			}))
			targetList.value.push(...cleanedRecords)
		} else {
			targetList.value.push(...res.result.records)
		}

		// 判断是否还有更多数据
		if (res.result.records.length < queryParams.value.pageSize) {
			isMove.value = false
		} else {
			isMove.value = true
		}
	}
}

// 移除HTML中的style属性
const removeStyleAttribute = (html) => {
	if (!html) return '';
	return html.replace(/\s+style\s*=\s*(['"])(.*?)\1/gi, '');
}

// 滚动加载更多
const handleScroll = () => {
	if (!myElement.value || loading.value || !isMove.value) return

	const rect = myElement.value.getBoundingClientRect()
	const windowHeight = window.innerHeight || document.documentElement.clientHeight

	// 当占位元素进入视口底部一定距离时加载更多
	if (rect.top <= windowHeight + 200) {
		queryParams.value.pageNo += 1
		getData(activeKey.value)
	}
}

// 选择点赞通知 - pc版本
const selectDesignWorks = (item) => {
	modelType.value = item.messageType
	modal1VisibleDz.value = true
	dzData.value = item.userList
}

// 选择点赞通知 - 手机版本
const selectDesignWorksWAP = (item) => {
	modelType.value = item.messageType
	modal1VisibleDzWAP.value = true
	dzDataWAP.value = item.userList
}

// 读取系统消息
const handleREAD = (item) => {
	if (item.readFlag == 0) {
		useHttp.get('/web/my/myReadSysMessage', { id: item.id }).then((res) => {
			item.readFlag = 1
			menuItems.value[0].messageNum--
			document.getElementById('clearCOunt').click()
		})
	}
}
// 重新编辑
const Reedit = (item) => {

	//    useHttp.get('/web/index/getByPicId', {
	//     picId: item.picId
	// }).then(res=>{
	// 	console.log("详细数据",res);

	// })

	uploadFileRef.value.edit(item.picId)


}
const editOk = (e) => {
	myAuditMessageList.value = []
	queryParams.value.pageNo = 1
	getData(activeKey.value)
}

const delOk = (e) => {
}


// 关闭模态框
const setModal1Visible = (visible) => {
	modal1VisibleDz.value = visible
	modal1VisibleDzWAP.value = visible
}
</script>

<style lang="less" scoped>
/* 样式部分保持不变 */
.notification_item {
	display: grid;
	align-items: center;
	gap: 0.52vw;
	margin: 1.04vw;

	.title {
		color: var(--color-text);
		font-size: var(--text-22);

	}

	.content_box {
		display: flex;
		background-color: var(--color-bg-20);
		border-radius: 0.52vw;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

		.Select_left {
			width: 10.9vw;

			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);


			.selector-wrapper {
				display: flex;
				flex-direction: column;
				margin-top: 0.52vw;
				color: var(--color-text);


				/* 选择器主体 */
				.selector-container {
					display: flex;
					width: 100%;
					max-width: 76vw;

					scrollbar-width: none;


				}




				.menu-item {
					white-space: nowrap;
					margin: 0.52vw 0px;
					font-size: var(--text-16);
					color: #999999;
					padding-left: 3vw;
					display: flex;
					justify-content: left;
					align-items: center;
					gap: 0.52vw;
					text-align: center;
					line-height: 33px;
					width: 100%;
					height: 1.97vw;
					cursor: pointer;


				}

				.menu-item.active {
					text-align: center;
					width: 100%;
					height: 1.97vw;

					background-color: var(--ba-sel);
					color: var(--ba-sel-t);

				}

				.Overallmessage {
					width: 0.8vw;
					height: 0.8vw;
					text-align: center;
					background-color: #d1000d;
					line-height: 0.8vw;
					border-radius: 50%;
					color: #fff;
					font-weight: 500;
					font-size: var(--text-10-F);
					position: relative;
					bottom: 0.52vw;
				}

				.selector-container::-webkit-scrollbar {
					display: none;
					/* 隐藏滚动条（Chrome/Safari） */
				}

				// .menu-item:hover {
				//     color: #333333;

				// }


			}
		}

		.information_right {
			flex: 1;

			.scroll-container {
				border: 1px solid red;
				max-height: 640px;
				// overflow-y: auto;
				padding-right: 8px;
				// scrollbar-width: thin;
				// scrollbar-color: #ccc transparent;

			}

			.scroll-container::-webkit-scrollbar {
				width: 6px;

			}

			.scroll-container::-webkit-scrollbar-thumb {
				background: #ccc;
				border-radius: 3px;
			}

			.information_box,
			.praise_box {
				width: 95%;
				margin: 0 auto;
				margin: 1.04vw;
				padding: 1.56vw 0px;
				border-bottom: 3px solid var(--border-b2);
			}





			.information_box {

				.Text-title {
					font-size: var(--text-16);
					font-weight: 600;
					color: var(--color-text-3);
				}

				.messageTypeif {
					font-size: var(--text-12);
					color: #d1000d;
					margin-left: 0.52vw;
				}

				.drop {
					width: 0.3vw;
					height: 0.3vw;
					border-radius: 0.52vw;
					margin-left: 0.52vw;
					position: relative;
					bottom: 0.52vw;

				}



				.title {
					font-size: var(--text-16);
					font-weight: 800;
					color: var(--color-text-3);
				}

				.Time {
					color: var(--color-text);
					font-size: var(--text-14);
					margin: 0.52vw 0px;

				}

				.Text {
					color: var(--color-text-con);
					font-size: var(--text-16);
					line-height: 1.5;
					text-indent: 2em;
				}
			}

			.praise_box {

				.praise_top {
					display: flex;
					gap: 0.72vw;

					.userimg {
						width: 1.92vw;
						height: 1.92vw;
						border-radius: 50px;
						object-fit: cover;
						overflow: hidden;
					}

					.userinfo {
						display: flex;
						gap: 0.52vw;


						.userinfo_title {
							font-size: var(--text-16);
							color: var(--color-text-3);
							font-weight: 800;
						}

						.intro_text {
							display: flex;
							align-items: center;
							gap: 0.41vw;
							font-size: var(--text-12);
							color: var(--color-text-6);

						}


					}

					.upvote {
						color: var(--color-text-6);
						font-size: var(--text-14);
						margin: 0.31vw 0px;

					}

					.WorkTime {
						font-size: var(--text-14);
						color: var(--color-text-39);
					}




					.LikeTime {
						font-size: var(--text-14);
						color: var(--color-text-39);
					}

					.a-button>.ant-btn {
						color: var(--color-text);
					}


				}

				.works_box {
					width: 18vw;
					height: 16.6vw;
					margin-top: 1vw;

					background-color: var(--color-bg-3b);
					border-radius: 0.52vw;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding-top: 0.52vw;


					.works_text_item {
						width: 95%;
						margin-top: 26px;
						display: grid;
						gap: 14px;

					}



					.works_img_item {
						width: 95%;
						height: 10vw;
						display: flex;
						justify-content: center;
						overflow: hidden;
						border-radius: 0.52vw;
						position: relative;

						.works_img {
							width: 100%;
							height: 20vw;
							object-fit: cover;
							border-radius: 0.52vw;
						}

						.Outlinedbtn {


							position: absolute;
							right: 0.52vw;
							bottom: 0.52vw;
							width: 2.5vw;
							height: 2.5vw;
							background-color: rgba(0, 0, 0, 0.5);
							z-index: 100;
							cursor: pointer;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 0.52vw;
							color: #fff;
							font-size: 1vw;
							
						}
					}


					.works_text {
						color: var(--color-text-3);
						font-size: var(--text-16);
						margin: 0px 0.41vw;



					}

					.works_Time {
						display: flex;
						justify-content: space-between;
						margin: 0px 0.52vw;
						font-size: var(--text-14);
						color: var(--color-text-39);
					}
				}

			}

			.loading-container {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 300px;
				width: 100%;
			}

		}
	}
}



.works_item-wap {
	width: 95%;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 8px;
	margin-top: 20px;

	.title-wap {

		font-size: 18px;
		color: red;
	}


	.selector-wrapper-wap {
		display: flex;
		justify-content: center;
		align-content: center;
		width: 100%;
		overflow-x: auto;
		/* 允许水平滚动 */
		scrollbar-width: none;
		/* 隐藏滚动条（Firefox） */
	}

	.selector-wrapper-wap::-webkit-scrollbar {
		display: none;
		/* 隐藏滚动条（Chrome/Safari） */
	}

	.selector-container-wap {
		display: flex;
		// border-radius: 8px;
		width: auto;
		min-width: 100%;
		box-sizing: border-box;
		overflow-x: auto;
		scrollbar-width: none;
		/* 隐藏滚动条（Firefox） */
	}

	.selector-container-wap::-webkit-scrollbar {
		display: none;
		/* 隐藏滚动条（Chrome/Safari） */
	}

	.menu-item-wap {
		padding: 0 10px;
		white-space: nowrap;
		font-size: 16px;
		color: #787a7e;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		text-align: center;
		line-height: 33px;
		flex-shrink: 0;

	}

	.menu-item-wap.active {
		text-align: center;
		line-height: 33px;
		border-radius: 4px;
		background-color: var(--ba-color-sel);
		color: var(--color-text-3);
	}

	.Overallmessage-wap {
		width: 14px;
		height: 14px;
		text-align: center;
		background-color: #d1000d;
		line-height: 14px;
		border-radius: 50%;
		color: #fff;
		font-weight: 500;
		font-size: 10px;
		position: relative;
		bottom: 10px;
	}



}

.information_right-wap {
	flex: 1;

	.information_box-wap,
	.praise_box-wap {
		width: 95%;
		margin: 0 auto;
		padding: 20px 0px;
		border-bottom: 3px solid var(--border-b2);

	}

	.information_box-wap {

		.messageTypeif-wap {
			font-size: 12px;
			color: #d1000d;
			margin-left: 0.52vw;
		}

		.drop-box {
			width: 10px;
			height: 10px;
			margin-left: 4px;

			.drop-wap {
				width: 6px;
				height: 6px;
				margin-left: 2px;
				position: relative;
				bottom: 10px;
			}
		}

		.title-name-wap {


			font-weight: 800;
			color: var(--color-text-3);
		}

		.Time-wap {
			color: var(--color-text);
			font-size: 14px;
			margin: 10px 0px;
		}

		.Text-wap {
			color: var(--color-text-con);
			font-size: 16px;
		}
	}

	.praise_box-wap {

		.praise_top-wap {
			display: flex;
			gap: 14px;

			.userimg-wap {
				width: 37px;
				height: 37px;
				border-radius: 50px;
			}

			.userinfo-wap {
				display: grid;
				gap: 10px;

				.userinfo_title-wap {
					font-size: 16px;
					color: var(--color-text-3);
					font-weight: 800;
				}

				.intro_text-wap {
					display: flex;
					align-items: center;
					gap: 8px;
					font-size: 12px;
					color: var(--color-text-6);
				}


			}

			.link-btn-wap>.ant-btn {
				font-size: 12px;
				color: var(--color-text);
			}

			.upvote-wap {
				color: var(--color-text);
				font-size: 14px;
				margin: 6px 0px;
			}


		}

		.works_box-wap {
			width: 347px;
			height: 320px;
			margin-top: 20px;
			background-color: var(--color-bg-F);
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			align-items: center;



			.works_img_item-wap {
				width: 95%;
				height: 190px;
				display: flex;
				justify-content: center;
				overflow: hidden;
				border-radius: 10px;
				padding-top: 10px;

				.works_img-wap {
					width: 100%;
					height: 200;
					object-fit: cover;
					border-radius: 10px;

				}

			}





			.works_text_item-wap {
				margin-top: 26px;
				display: grid;
				width: 95%;
			}

			.works_text-wap {
				color: var(--color-text-3);
				font-size: 16px;
				margin: 8px;
			}

			.works_Time-wap {
				display: flex;
				justify-content: space-between;
				margin: 10px;
				font-size: 14px;
				color: var(--color-text);
			}
		}

	}


	.loading-container-wap {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 300px;
		width: 100%;
	}

}

// 查看更多
.title-slot {
	text-align: center;
	width: 100%;
	color: var(--color-text-3);
	font-size: var(--text-22);
}

.fans-list {
	height: 28vw;
	overflow-y: auto;
	border-radius: 8px;

	.fans-box {
		width: 95%;
		margin: 0 auto;
		padding: 10px 0px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.fans-content {
			display: flex;

			gap: 20px;

			.user-img {
				width: 2.6vw;
				height: 2.6vw;
				border-radius: 50px;
			}

			.user-name {
				font-size: var(--text-18);
				color: var(--color-text-3);
			}

			.user-num {
				display: flex;
				gap: 6px;
				font-size: var(--text-14);
				color: var(--color-text-6);
			}
		}

		.followWithInterest {
			width: 5.2vw;
			height: 1.71vw;
			border-radius: 10px;
			text-align: center;
			line-height: 1.71vw;
			background-color: #b6080f;
			font-size: var(--text-14);
			color: var(--text-fff);
		}

	}

	.NoMore {
		text-align: center;
		margin-top: 10px 0px;
		font-size: var(--text-14);
		color: var(--color-text);
	}
}

// 查看更多手机版本
.title-slot-wap {
	text-align: center;
	width: 100%;
	color: var(--color-text-3);
	font-size: 18px;
}

.fans-list-wap {
	height: 100%;
	overflow-y: auto;
	border-radius: 8px;

	.fans-box-wap {
		width: 100%;
		margin: 0 auto;
		padding: 10px 0px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.fans-content-wap {
			display: flex;
			gap: 20px;

			.user-img-wap {
				width: 50px;
				height: 50px;
				border-radius: 50px;
			}

			.user-name-wap {
				font-size: 18px;
				color: var(--color-text-3);
			}

			.user-num-wap {
				display: flex;
				gap: 6px;
				font-size: 14px;
				color: var(--color-text-6);
			}
		}

		.followWithInterest-wap {
			width: 5.2vw;
			height: 1.71vw;
			border-radius: 10px;
			text-align: center;
			line-height: 1.71vw;
			background-color: #b6080f;
			font-size: var(--text-14);
			color: var(--text-fff);
		}

	}

	.NoMore-wap {
		text-align: center;
		margin-top: 10px 0px;
		font-size: 14px;
		color: var(--color-text);
	}
}
</style>